<template>
  <div class="signed-agent-detail-view view-container">

    <header-module left-custom padding>
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">{{ datas.tradeStatus == 1 ? '正式代理商' : '准代理商' }}：{{ datas.agentName }}</span>
          <el-tag type="warning" size="small">
            {{ getLabel('agent_status',datas.agentStatus) }}
            <span v-if="datas.flowStatus=='DOING'">[变更审核中]</span>
          </el-tag>
        </div>
      </template>

      <template #btn>
        <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
        <el-button v-if="datas.flowStatus != 'DOING'" class="main-btn" size="small" type="primary" @click="onChange">变更信息</el-button>
        <el-button v-if="datas.haveDistribute != 1 && datas.flowStatus != 'DOING'" class="main-btn" size="small" type="primary" @click="onDistributors">生成配送商</el-button>
        <!--                <el-button class="main-btn" size="small" type="primary" @click="onEnd" v-if="datas.agentStatus == 1">终止合作</el-button>-->
        <!--                <el-button class="main-btn" size="small" type="primary" @click="onOut" v-if="datas.agentStatus == 1">注销企业</el-button>-->
      </template>

    </header-module>

    <div class="info-container">

      <el-form :inline="true" label-position="right" label-width="130px" size="small" class="filter-form-inline">
        <el-row style="margin-left: 0px;margin-right:0px;">
          <el-col :span="6">
            <el-form-item label="代理商编号：" style="width: 100%;">
              <span>{{ datas.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代理商级别：" style="width: 100%;">
              <span>{{ getLabel('agent_level',datas.agentLevel) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区：" style="width: 100%;">
              <span>{{ datas.provinceName }}/{{ datas.cityName }}/{{ datas.areaName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="详细地址：" style="width: 100%;">
              <span>{{ datas.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div class="main-content">

      <el-tabs v-model="activeName" class="elTabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="infomationView">
          <infomation-view v-if="activeName=='infomationView'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="代理产品与价格" name="productAndPriceView">
          <product-and-price-view v-if="activeName=='productAndPriceView'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="开发中终端" name="developmentTerminal">
          <development-terminal v-if="activeName == 'developmentTerminal'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane v-if="datas.tradeStatus == 1" label="交易终端" name="tradingTerminal">
          <trading-terminal v-if="activeName=='tradingTerminal'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="代理合同" name="contract">
          <contract v-if="activeName=='contract'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="信用管理" name="creditManagement">
          <credit-management v-if="activeName=='creditManagement'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="联系人" name="contact">
          <contact v-if="activeName=='contact'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
        <!--                <el-tab-pane label="审批流程" name="fourth">-->
        <!--                    <component :is="activeName" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData"></component>-->
        <!--                </el-tab-pane>-->
        <el-tab-pane label="修改记录" name="operationView">
          <operation-view v-if="activeName=='operationView'" :datas="datas" :mode-id="datas.id" type-data="agent" mode="agent" :contract-data="contractData" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <signed-agent-change-view ref="signedView" @success="onSuccess" />

  </div>
</template>

<script>
import tradingTerminal from './modules/tradingTerminal/index.vue'
import contract from '../../../commonView/contract/contract.vue'
import contact from '../../../commonView/contact/contact.vue'
import signedAgentChangeView from '../modules/signedAgentChangeView.vue'
import developmentTerminal from '../../modules/partTimeBigBag/developmentTerminal.vue'
import productAndPriceView from './modules/productAndPrice/index.vue'
import contactsView from './modules/contactsView.vue'
import infomationView from './modules/infomationView.vue'
import partTimeContract from '../../modules/partTimeBigBag/partTimeContract.vue'
import {useRoute, useRouter} from 'vue-router'
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onBeforeMount,
  reactive,
  ref,
  toRefs
} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    creditManagement: defineAsyncComponent(() =>
      import('@CRM/views/commonView/creditManagement/index.vue')
    ),
    partTimeContract, infomationView, contactsView, productAndPriceView, developmentTerminal, signedAgentChangeView, contact, contract, tradingTerminal },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var activeName = ref('infomationView')
    var signedView = ref(null)

    var data = reactive({
      datas: {

      },
      contractData: {
        id: 0,
        name: '',
        contractType: 'agent',
        contractObjectType: 'agent',
        title: '代理合同详情',
        disabled: true,
      }
    })

    const getDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then(res => {
        if (!res.code && res.data) {
          data.datas = res.data.agent
          data.contractData.id = res.data.agent.id
          data.contractData.name = data.datas.agentName
        }
      })
    }

    onBeforeMount(() => {
      if (route.query.id) {
        getDetail(route.query.id)
      }
    })

    const onBack = () => {
      router.back()
    }

    const onChange = () => {
      signedView.value.openDialog(data.datas)
    }

    const onSuccess = () => {
      currentInstance.proxy.customMessage({
        type: 'success',
        message: '变更成功',
      })

      getDetail(data.datas.id)
    }

    const handleClick = (val) => {

    }

    const onEnd = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认终止合作？',
          title: '终止合作',
        })
        .then(() => {
          api.signedAgent.AGENT_END(data.datas.id).then(res => {
            if (!res.code && res.data) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getDetail(data.datas.id)
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onOut = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认注销企业？',
          title: '注销',
        })
        .then(() => {
          api.signedAgent.AGENT_OUT(data.datas.id).then(res => {
            if (!res.code && res.data) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getDetail(data.datas.id)
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onDistributors = () => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'create',
          agentId: data.datas.id
        },
      })
    }

    return {
      router,
      activeName,
      signedView,
      ...toRefs(data),

      onBack,
      onChange,
      handleClick,
      onEnd,
      onOut,
      onSuccess,
      onDistributors
    }
  }
})
</script>

<style scoped>

</style>
